<template>
	<view class="order" v-if="orderData">
		<view class="head bg-white margin-bottom-xs" v-if="($moment(orderData.last_pay_time).format('X')) - Date.parse(new Date()) / 1000 > 0 && orderData.status == 1">
			请在 <text>{{statetime}}</text> 内支付，逾期将自动取消订单
		</view>
		<view class="head bg-white margin-bottom-xs" v-if="orderData.status != 1">
			{{stateText[orderData.status - 1]}}
		</view>
		<view class="address bg-white flex justify-start align-center margin-bottom-xs">
			<text class="iconfont icon-dingxiang text-green"></text>
			<view class="text flex flex-direction">
				<text>{{orderData.address.name}} {{orderData.address.mobile}}</text>
				<text>{{`${orderData.address_detail}`}}</text>
			</view>
		</view>
		<view class="product bg-white margin-bottom-xs">
			<view class="goods">
				<image :src="$wanlshop.oss(orderData.servesinfo.image)" mode="aspectFill"></image>
				<view class="info">
					<view class="title text-cut-2">{{orderData.servesinfo.title}}</view>
					<view class="subtitle text-cut-2">
					{{orderData.serves.name}} 
					</view>
					<view class="money">
						<text>实付款</text>
						<text>¥{{orderData.order_money}}</text>
					</view>
				</view>
			</view>
			<view class="list padding-bottom-sm">
				<view class="item"> <text>商品总价</text> <text>￥{{orderData.order_money}}</text> </view>
				<view class="item"> <text>优惠金额</text> <text>￥0.00</text> </view>
			</view>
		</view>
		
		<view class="wanl-order-list wanl-goods-comment">
			<view class="tab-content">
				<view class="list padding-bj bg-white" v-for="(item,k) in commentList" :key="item.id">
					<view class="userinfo flex justify-between align-center" v-if="item.user">
						<view class="avatar flex justify-start align-center">
							<view class="cu-avatar round margin-right-xs"
								:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.user.avatar, 35, 35, 2, 'avatar') + ')' }">
							</view>
							<view class="text-sm">
								<view>{{ item.user.nickname }}</view>
								<view class="text-gray">{{ $wanlshop.timeToDate(item.createtime) }}</view>
							</view>
						</view>
						<wanl-rate :current="item.score" :disabled="true" />
					</view>
					<view class="details">
						<view class="margin-tb-sm">{{ item.content || '没有评价内容~'}}</view>
					</view>
					<view class="flex-sub flex justify-start align-center">
						<view class="bg-img" v-for="(image, index) in item.images_text" :key="index"
							@tap="$wanlshop.previewImage(item.images_text, index)"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(image, 248, 0) + ')' }"></view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="info bg-white margin-bottom-xs flex justify-start align-center">
			<view class="flex flex-direction">
				<view class="item">
					<text class="w">服务人员</text> 
					<text>{{orderData.suserinfo.realname || '-'}}</text> <text></text> 
				</view>
				<view class="item">
					<text class="w">手机号码</text> 
					<text>{{orderData.suserinfo.mobile || '-'}}</text>
					<text @tap="$wanlshop.phone(orderData.suserinfo.mobile)" class="iconfont icon-31dianhua" style="font-size: 36rpx;"></text> 
				</view>
				<view class="item">
					<text class="w">预约上门时间</text>
					<text>{{orderData.serves_time_text}} {{orderData.timeSlot[orderData.time_slot]}}</text>
					<text class="text-green"></text>
				</view>
				
				
				<view class="item" v-if="orderData.service_log && orderData.service_log.serve_document" style="justify-content: flex-start;align-items: flex-start;">
					<text class="w">服务单</text>
					<image @tap="$wanlshop.previewImage([orderData.service_log.serve_document],0)" style="width: 140rpx;height: 140rpx;" :src="$wanlshop.oss(orderData.service_log.serve_document)" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view v-if="orderData.serves_user_images.length > 0" class="serves_user_images bg-white margin-tb-xs padding-tb-sm padding-lr">
			<view class="margin-bottom-xs text-df">服务图片</view>
			<image v-for="(data,k) in orderData.serves_user_images" :key="k" :src="$wanlshop.oss(data)" mode="aspectFill" @tap="$wanlshop.previewImage(orderData.serves_user_images,k)"></image>
		</view>
		
		
		<view class="info bg-white margin-bottom-xs">
			<view class="item"> <text>订单编号</text> <text>{{orderData.order_sn}}</text> <text class="wlIcon-fuzhi" @tap="$wanlshop.copy(orderData.order_sn)"></text></view>
			<view class="item"> <text>下单时间</text> <text>{{orderData.createtime_text}}</text> <text></text></view>
			<view class="item"> <text>支付时间</text> <text>{{orderData.paytime_text}}</text> <text></text></view>
		</view>
		
		<view class="safeAreaBottom"> </view>
		<view v-if="orderData.status == 1 || (orderData.status == 1 && t == 1) || ((orderData.status == 3 && t == 2) || (orderData.status == 9 && t == 2) || (orderData.status == 4 && t == 1)) || (orderData.status == 6 && t == 1) || ((orderData.status > 1 && orderData.status < 8) && orderData.overaftersale == 1 && t == 1) || (orderData.status == 7 && t == 2)" class="wanlian cu-bar tabbar solid-top foot text-df">
			<view class="flex flex-direction align-center" @tap="$wanlshop.auth('/pages/user/service')">
				<text class="iconfont icon-kefu1"></text>
				<text class="text-green">客服</text>
			</view>
			<view class="btn">
				<button v-if="orderData.status == 1" @tap="addOrder" class="cu-btn line-green text-sm"> 取消订单 </button>
				<button v-if="orderData.status == 1 && t == 1" @tap="$wanlshop.to(`/pages/user/money/pay?type=${type}&id=${orderData.id}`)" class="cu-btn line-green text-sm"> 立即支付 </button>
				<button v-if="orderData.status == 3 && t == 2" @tap="getStatus(orderData,1)" class="cu-btn line-green text-sm"> 开始服务 </button>
				<button v-if="orderData.status == 9 && t == 2" @tap="getStatus(orderData,1)" class="cu-btn line-green text-sm"> 继续服务 </button>
				<button v-if="orderData.status == 9 && t == 2" @tap="getStatus(orderData,2)" class="cu-btn line-green text-sm"> 结束服务 </button>
				<button v-if="orderData.status == 7 && t == 2" @tap="show = !show" class="cu-btn line-green text-sm">服务加时</button>
				
				<button v-if="orderData.status == 4 && t == 1" @tap="startService(orderData)" class="cu-btn line-green text-sm"> 确认完成 </button>
				
				<button v-if="orderData.status == 6 && t == 1" @tap="commentOrder(orderData)" class="cu-btn line-green text-sm"> 立即评价 </button>
				<button v-if="(orderData.status == 2 || orderData.status == 3) && orderData.overaftersale == 1 && t == 1" @tap="onRefund(orderData)" class="cu-btn line-green text-sm"> 申请售后 </button>
				
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="10" width="650rpx" height="450rpx">
			<view class="box">
				<text>请输入加时费用</text>
				<input v-model="price" placeholder="请输入费用" />
				<input v-model="remark" placeholder="请输入备注" />
				
				<view class="add" @tap="addTime(orderData)">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			orderData: null,
			timer:null,
			statetime:'',
			stateText: ['待支付','正在分配服务人员','待服务','服务完成','用户已确认','待评价','已完成','已取消','服务中'],
			list:[],
			type: '', // 1：医护人员；2：陪诊人员；3：家政人员；4：司机；5：志愿者
			typeList:{
				domestic:3,
				medicalvisit: 1,
				accompany: 2,
			},
			t:1, // 1 用户  2 服务人员
			info: null,
			commentList:[],
			price: '',
			remark:''
		};
	},
	onLoad(option) {
		this.t = option.t
		this.type = option.type
		this.loadData(option);
		// this.getApplyinfo(option)
		// this.getTimeSlot()
	},
	onHide() {
		clearInterval(this.timer);
		this.timer = null;
	},
	methods: {
		async addTime(item) {
			this.show = true
			if(!this.price) return this.$wanlshop.msg('请输入加时费用')
			if(!this.remark) return this.$wanlshop.msg('请输入备注')
			await uni.request({
				url: `/addons/homeking/api.order/addhour`,
				method: 'POST',
				data: {
					order_id: item.id,
					price:this.price,
					remark:this.remark
				},
				success: res => {
					console.log(res)
					this.$wanlshop.msg(res.msg)
					this.show = false
					this.price = '';
					this.remark = '';
					this.loadData({id:this.orderData.id,type:this.typeList[this.type]})
				}
			});
		},
		commentOrder(order) {
			let data = {
				image: order.servesinfo.image,
				title: order.servesinfo.title,
				sub_title: `${order.serves.price}/${order.serves.show_unit}*${order.serves.quantity}`,
				source_id: order.serves_id,
				goods_id:order.goods_id
			}
			this.$wanlshop.to(`/pages/user/record/comment?order_id=${order.id}&type=${this.type}&t=${this.t}&data=${encodeURIComponent(JSON.stringify(data))}`)
		},
		onRefund(item){
			// is_refund  1 不可以售后  2 可以售后
			if (item.is_refund == 2) { //申请退款
				this.$wanlshop.to(`/pages/user/refund/apply?data=${encodeURIComponent(JSON.stringify({
					order_id: item.id,
					order_type: this.type,
					goods: {
						image: item.servesinfo.image,
						title: item.serves.name,
						difference: item.servesinfo.title
					}
				}))}`);
			}else{ // 查看详情
				this.$wanlshop.to(`/pages/user/refund/details?id=${refund_id}`);
			}
		},
		// async getTimeSlot() {
		// 	await uni.request({
		// 		url: `/publics/commons/timeSlot`,
		// 		method: 'POST',
		// 		success: res => {
		// 			let data = res.res;
		// 			if(data.code == 1) {
		// 				this.list = data.data
		// 			}
		// 		}
		// 	});
		// },
		// async getApplyinfo(data){
		// 	await uni.request({
		// 		url: `/member/user/applyinfo`,
		// 		method:"POST",
		// 		data: {
		// 			type:this.typeList[data.type],
		// 			order_id: data.id
		// 		},
		// 		success: res => {
		// 			this.info = res.data
		// 		}
		// 	});
		// },
		// 获取订单
		async loadData(data) {
			await uni.request({
				url: `/addons/homeking/api.order/detail`,
				method:"POST",
				data: {
					id:data.id
				},
				success: res => {
					if(res.data.serves_user_images) {
						res.data.serves_user_images = res.data.serves_user_images.split(',')
					} else {
						res.data.serves_user_images = []
					}
					this.orderData = res.data;
					if(res.data.status == 7) {
						// this.getComment(res.data.id,3)
					}
				}
			});
		},
		async getComment(id,type) {
			await uni.request({
				url: '/addons/homeking/api.comment/my',
				data: {
					page: 1,
					type:type,
					order_id:id
				},
				success: res => {
					console.log(res.data.data)
					this.commentList = res.data.data;
				}
			});
		},
		getTime(last_pay_time) {
			var time = (this.$moment(last_pay_time).format('X')) - Date.parse(new Date()) / 1000;
			if(time == 0) {
				this.loadData(this.orderData.id)
				clearInterval(this.timer);
				this.timer = null;
				return false;
			}
			// 转换为式分秒
			let h = parseInt(time / 60 / 60 % 24)
			let m = parseInt(time / 60 % 60)
			 m = m < 10 ? '0' + m : m
			let s = parseInt(time % 60)
			 s = s < 10 ? '0' + s : s
			// 作为返回值返回
			this.statetime = `${h}时${m}分${s}秒`
		},
		async startService(order) {
			let url = '';
			if(this.t == 1) {
				url = '/addons/homeking/api.order/user_confirm'
			} else {
				url = '/addons/homeking/api.order/serves_confirm'
			}
			await uni.request({
				url: url,
				method: 'POST',
				data: {
					order_id: order.id
				},
				success: res => {
					if(this.t == 2) {
						this.$wanlshop.to(`/pages/common/rtmp/transcribe?order_id=${order.id}&type=homeking&name=继续服务&timestamp=${order.service_log.createtime}`)
					} else {
						this.$wanlshop.msg(res.msg)
						this.loadData({id:this.orderData.id,type:this.typeList[this.type]})
					}
				}
			});
		},
		async getStatus(order,k) {
			let data = await uni.request({
				url: `/addons/homeking/api.serves/status`,
				method: 'POST',
				data: {
					order_id: order.id,
					serves_uid: this.$store.state.user.id, // 服务人员ID
					// serves_type: 1,
					user_id: order.user_id
				},
				success: (res) => {
					if(res.data) {
						if(res.data.status == 0) {
							if(k == 1) {
								this.start(order)
							} else {
								this.$wanlshop.msg('服务未开始')
							}
						} else if(res.data.status == 1) {
							if(k == 1) {
								// this.$wanlshop.msg('服务已开始')
								this.$wanlshop.to(`/pages/common/rtmp/transcribe?order_id=${order.id}&type=homeking&name=继续服务&timestamp=${order.service_log.createtime}`)
							} else {
								this.end(order,res.data.id)
							}
						} else if(res.data.status == 2) {
							this.$wanlshop.msg('服务已经结束')
						} else if(res.data.status == 4) {
							this.$wanlshop.msg('服务已作废')
						}
					} else {
						if(k == 1) {
							this.start(order)
						} else {
							this.$wanlshop.msg('服务未开始')
						}
					}
				}
			})
		},
		async start(order) {
			let data = {
				type:'homeking',
				serves_type:1,
				user_id:order.user_id,
				id:order.id,
				address: order.address_detail,
				lat:order.lat,
				lng:order.lng
			}
			this.$wanlshop.to(`/pages/user/signin/sign?data=${encodeURIComponent(JSON.stringify(data))}`)
			return false;
			await uni.request({
				url: `/addons/homeking/api.serves/start`,
				method: 'POST',
				data: {
					order_id: order.id,
					serves_uid: this.$store.state.user.id, // 服务人员ID
					serves_type: 1,
					customer_id: order.user_id,
					clock_address: uni.getStorageSync('formatted_address')
				},
				success: res => {
					this.loadData({id:this.orderData.id,type:this.typeList[this.type]})
					this.$wanlshop.to(`/pages/common/rtmp/transcribe?order_id=${order.id}&type=homeking`)
				}
			});
			
		},
		async end(order,serves_id) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					uni.request({
						url: '/wanlshop/common/uploadData',
						success: updata => {
							uni.uploadFile({
								url: updata.data.uploadurl,
								filePath: res.tempFilePaths[0],
								name: 'file',
								formData: updata.data.storage == 'local' ? null : updata.data.multipart,
								success: res => {
									this.endServices(order,serves_id,JSON.parse(res.data).data.url)
								},
								fail: error => {
									this.$wanlshop.msg(JSON.parse(error.data).msg);
								}
							});
						}
					});
				}
			});
		},
		async end(order,serves_id,img) {
			await uni.request({
				url: `/addons/homeking/api.serves/end`,
				method: 'POST',
				data: {
					serves_id: serves_id,
					serve_document:img
				},
				success: res => {
					if(res.res.code == 1) {
						this.loadData({id:this.orderData.id,type:this.typeList[this.type]})
						this.$wanlshop.msg(res.msg)
					}
				}
			});
			
		},
	}
};
</script>

<style lang="less">
page {
	background-color: #ededed;
}
.order {
	.head {
		height: 72rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		color: #333333;
		text-align: center;
		text {
			color: #E31F1F;
		}
	}
	.address {
		min-height: 110rpx;
		padding-left: 50rpx;
		> text {
			font-size: 40rpx;
			margin-right: 20rpx;
		}
		.text {
			text {
				display: inline-block;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				&:nth-child(2) {
					font-size: 26rpx;
				}
			}
		}
	}
}



.wanlian,.safeAreaBottom {
	height: calc(128rpx + env(safe-area-inset-bottom)) !important;
}
.wanlian {
	justify-content: space-between !important;
	background-color: #fff !important;
	padding: 0 30rpx 0 34rpx !important;
	> view {
		text {
			display: inline-block;
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #4CBD66;
			font-weight: 400;
			&:nth-child(1) {
				font-size: 40rpx;
				margin-top: 10rpx;
			}
		}
	}
	button {
		// width: 212rpx;
		height: 72rpx;
		border-radius: 10rpx;
		margin-left: 16rpx;
		&:nth-child(1) {
			margin-left: 0;
		}
	}
}

.product {
	padding: 0 30rpx;
	.goods {
		padding: 26rpx 0;
		display: flex;
		justify-content: flex-start;
		// align-items: center;
		border-bottom: 1rpx solid rgba(182,182,182,0.5);
		image {
			width: 170rpx;
			height: 170rpx;
			border-radius: 6rpx;
			margin-right: 20rpx;
		}
		.info {
			width: calc(100% - 190rpx);
			.title {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				// font-weight: bold;
				color: #333333;
				line-height: 44rpx;
			}
			.subtitle {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #555555;
				line-height: 34rpx;
				margin-top: 8rpx;
			}
			.money {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-top: 28rpx;
				text {
					display: inline-block;
					&:nth-child(1) {
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 28rpx;
					}
					&:nth-child(2) {
						font-size: 36rpx;
						font-family: DIN-Bold, DIN;
						font-weight: bold;
						color: #E31F1F;
						line-height: 36rpx;
						margin-left: 8rpx;
					}
				}
			}
		}
	}
	.list {
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:nth-child(1) {
				margin-top: 16rpx;
			}
			&:nth-child(2) {
				margin-top: 10rpx;
			}
			text {
				display: inline-block;
				&:nth-child(1) {
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 28rpx;
				}
				&:nth-child(2) {
					font-size: 26rpx;
					font-family: DIN-Bold, DIN;
					font-weight: 400;
					color: #666666;
					line-height: 30rpx;
				} 
			}
		}
	}
}
.order {
	>.info {
		padding: 20rpx 30rpx;
		> view {
			width: 100%;
		}
		> image {
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
		}
		.w {
			width: 170rpx;
		}
		.item {
			margin-bottom: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:last-child {
				margin-bottom: 0;
			}
			text {
				display: inline-block;
				&:nth-child(1) {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #888888;
					line-height: 40rpx;
					margin-right: 36rpx;
				}
				&:nth-child(2) {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					flex: 1;
					text-align: left;
				}
				&:nth-child(3) {
					font-size: 28rpx;
				}
			}
		}
	}
}
.serves_user_images {
	image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 6rpx;
		margin-right: 16rpx;
		&:nth-child(4n) {
			margin-right: 0;
		}
	}
}
.wanl-goods-comment {
	.list {
		padding-bottom: 20rpx !important;
		margin-bottom: 10rpx !important;
	}
}
.bg-img {
	width: 100rpx;
	height: 100rpx;
	margin-right: 16rpx;
}
.box {
	padding: 20rpx 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	text {
		display: inline-block;
		width: 100%;
		height: 44rpx;
		line-height: 44rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		text-align: center;
	}
	input {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		width: 600rpx;
		border-bottom: 1px solid #ededed;
	}
	.add {
		width: 500rpx;
		height: 90rpx;
		background-color: #4CBD66;
		color: #fff;
		border-radius: 20rpx;
		line-height: 90rpx;
		text-align: center;
	}
}
</style>
